<!doctype html>
<html class="no-js"  lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- META DATA -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!--font-family-->
    <link href="https://fonts.googleapis.com/css?family=Rufina:400,700" rel="stylesheet" />

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet" />

    <!-- TITLE OF SITE -->
    <title>Travel</title>

    <!-- favicon img -->
    <link rel="shortcut icon" type="image/icon" th:href="@{/assets/logo/favicon.png}"/>

    <!--font-awesome.min.css-->
    <link rel="stylesheet" th:href="@{/assets/css/font-awesome.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/user.css}" />

    <!--animate.css-->
    <link rel="stylesheet" th:href="@{/assets/css/animate.css}" />

    <!--hover.css-->
    <link rel="stylesheet" th:href="@{/assets/css/hover-min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/user.css}">

    <!--datepicker.css-->
    <link rel="stylesheet"  th:href="@{/assets/css/datepicker.css}" >

    <!--owl.carousel.css-->
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/owl.theme.default.min.css}"/>

    <!-- range css-->
    <link rel="stylesheet" th:href="@{/assets/css/jquery-ui.min.css}" />

    <!--bootstrap.min.css-->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}" />

    <!-- bootsnav -->
    <link rel="stylesheet" th:href="@{/assets/css/bootsnav.css}"/>

    <!--style.css-->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}" />

    <!--responsive.css-->
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- main-menu Start -->
<header class="top-area">
    <div class="header-area">
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                    <div class="logo">
                        <a href="/hotel/inde">
                            hotel<span>Nest</span>
                        </a>
                    </div><!-- /.logo-->
                </div><!-- /.col-->
                <div class="col-sm-10">
                    <div class="main-menu">

                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <i class="fa fa-bars"></i>
                            </button><!-- / button-->
                        </div><!-- /.navbar-header-->
                        <div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="smooth-menu"><a href="#home">hotel</a></li>
                                <li class="smooth-menu"><a href="#gallery">login</a></li>
                                <li class="smooth-menu"><a href="#">register </a></li>
                                <li class="smooth-menu"><a href="#spo">Special Offers</a></li>
                                <li class="smooth-menu"><a href="#blog">blog</a></li>
                                <li class="smooth-menu"><a href="#subs">subscription</a></li>




                                <!--								用户信息显示,导航栏二级菜单-->
                                <li><a href="">用户</a>
                                    <ul class="sub" id="b">
                                        <li><a href="">用户个人信息</a></li>
                                        <li><a th:href="@{torder/torders(user_id=${user.user_id})}">用户订单</a></li>
                                    </ul>
                                </li><!--/.project-btn-->
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.main-menu-->
                </div><!-- /.col-->
            </div><!-- /.row -->
            <div class="home-border"></div><!-- /.home-border-->
        </div><!-- /.container-->
    </div><!-- /.header-area -->

</header><!-- /.top-area-->
<!-- main-menu End -->

<!--packages start-->
<section id="pack" class="packages">
    <div class="container">
        <div class="gallary-header text-center">
            <h2>
                special packages
            </h2>
            <p>
                Duis aute irure dolor in  velit esse cillum dolore eu fugiat nulla.
            </p>
        </div><!--/.gallery-header-->
        <div class="packages-content">
            <div class="row">
                <table>
                    <tr th:each="torder:${torders}">
                        <div class="col-md-4 col-sm-6">
                            <div class="single-package-item">
                                <img th:src="${torder.roomPhono}" alt="package-place" class="hotel_img">
                                <div class="single-package-item-txt">
                                    <h4 th:text="${torder.hotelTranslatedName}"> <span class="pull-right"><a>￥</a><a th:text="${torder.fprice}"></a> </span></h4>
                                    <div class="packages-para">
                                        <p>

                                            <i class="fa fa-angle-right"></i><a th:text="${torder.bedType}"></a>

                                        </p>
                                        <p>

                                            <i class="fa fa-angle-right"></i><a>订单状态:</a> <a th:text="${torder.state}"></a>
                                        </p>
                                    </div><!--/.packages-para-->
                                    <div class="packages-review">
                                        <p>
                                            <a>下单时间：</a><a th:text="${torder.time}"></a>
                                        </p>
                                    </div><!--/.packages-review-->
                                    <div class="about-btn">


                                        <button  class="about-view packages-btn" th:onclick="order([[${torder.orderId}]])">
                                            Details
                                        </button>
                                    </div><!--/.about-btn-->

                                </div><!--/.single-package-item-txt-->
                            </div><!--/.single-package-item-->

                        </div><!--/.col-->
                    </tr>
                </table>



            </div><!--/.row-->
        </div><!--/.packages-content-->
    </div><!--/.container-->

</section><!--/.packages-->
<!--packages end-->










<!-- footer-copyright start -->
<footer  class="footer-copyright">
    <div class="container">
        <div class="footer-content">
            <div class="row">

                <div class="col-sm-3">
                    <div class="single-footer-item">
                        <div class="footer-logo">
                            <a href="index.html">
                                tour<span>Nest</span>
                            </a>
                            <p>
                                best travel agency
                            </p>
                        </div>
                    </div><!--/.single-footer-item-->
                </div><!--/.col-->

                <div class="col-sm-3">
                    <div class="single-footer-item">
                        <h2>link</h2>
                        <div class="single-footer-txt">
                            <p><a href="#">home</a></p>
                            <p><a href="#">destination</a></p>
                            <p><a href="#">spacial packages</a></p>
                            <p><a href="#">special offers</a></p>
                            <p><a href="#">blog</a></p>
                            <p><a href="#">contacts</a></p>
                        </div><!--/.single-footer-txt-->
                    </div><!--/.single-footer-item-->

                </div><!--/.col-->

                <div class="col-sm-3">
                    <div class="single-footer-item">
                        <h2>popular destination</h2>
                        <div class="single-footer-txt">
                            <p><a href="#">china</a></p>
                            <p><a href="#">venezuela</a></p>
                            <p><a href="#">brazil</a></p>
                            <p><a href="#">australia</a></p>
                            <p><a href="#">london</a></p>
                        </div><!--/.single-footer-txt-->
                    </div><!--/.single-footer-item-->
                </div><!--/.col-->

                <div class="col-sm-3">
                    <div class="single-footer-item text-center">
                        <h2 class="text-left">contacts</h2>
                        <div class="single-footer-txt text-left">
                            <p>+1 (300) 1234 6543</p>
                            <p class="foot-email"><a href="#">info@tnest.com</a></p>
                            <p>North Warnner Park 336/A</p>
                            <p>Newyork, USA</p>
                        </div><!--/.single-footer-txt-->
                    </div><!--/.single-footer-item-->
                </div><!--/.col-->

            </div><!--/.row-->

        </div><!--/.footer-content-->
        <hr>
        <div class="foot-icons ">
            <ul class="footer-social-links list-inline list-unstyled">
                <li><a href="#" target="_blank" class="foot-icon-bg-1"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" target="_blank" class="foot-icon-bg-2"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" target="_blank" class="foot-icon-bg-3"><i class="fa fa-instagram"></i></a></li>
            </ul>
            <p>&copy; 2017 <a href="#">ThemeSINE</a>. All Right Reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>

        </div><!--/.foot-icons-->
        <div id="scroll-Top">
            <i class="fa fa-angle-double-up return-to-top" id="scroll-Top" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i>
        </div><!--/.scroll-Top-->
    </div><!-- /.container-->

</footer><!-- /.footer-copyright-->
<!-- footer-copyright end -->




<script th:src="@{/assets/js/jquery.js}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

<!--modernizr.min.js-->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>


<!--bootstrap.min.js-->
<script  th:src="@{/assets/js/bootstrap.min.js}"></script>

<!-- bootsnav js -->
<script th:src="@{/assets/js/bootsnav.js}"></script>

<!-- jquery.filterizr.min.js -->
<script th:src="@{/assets/js/jquery.filterizr.min.js}"></script>

<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<!--jquery-ui.min.js-->
<script th:src="@{/assets/js/jquery-ui.min.js}"></script>

<!-- counter js -->
<script th:src="@{/assets/js/jquery.counterup.min.js}"></script>
<script th:src="@{/assets/js/waypoints.min.js}"></script>

<!--owl.carousel.js-->
<script  th:src="@{/assets/js/owl.carousel.min.js}"></script>

<!-- jquery.sticky.js -->
<script th:src="@{/assets/js/jquery.sticky.js}"></script>

<!--datepicker.js-->
<script  th:src="@{/assets/js/datepicker.js}"></script>

<!--Custom JS-->
<script th:src="@{/assets/js/custom.js}"></script>

<!--search.js-->
<script th:src="@{/assets/js/search.js}"></script>
<script th:src="@{/assets/js/ple_date.js}"></script>
<script th:src="@{/assets/js/orders.js}"></script>


</body>

</html>